import { useState, useEffect } from "react";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { TouchBackend } from "react-dnd-touch-backend";
import Wrapper from "../DragContainer/wapper";
import "./index.less";

const DragContent = ({ onChange, xInfo, yInfo }) => {
  const [isIFrame, setIsIFrame] = useState(false);

  useEffect(() => {
    setIsIFrame(!(window.self === window.top));
  }, []);

  return (
    <div className="drag-content-wrap">
      <DndProvider backend={isIFrame ? HTML5Backend : TouchBackend}>
        <Wrapper
          onChange={onChange}
          xInfo={xInfo}
          yInfo={yInfo}
        />
      </DndProvider>
    </div>
  );
};

export default DragContent;
